<template>
    <b-row class="mt-3">
        <b-col>
            <Page size="small" :total="totalPage" :current="currentPage" :page-size="pageSize" :show-elevator="showElevator" :show-total="showTotal" :class-name="pageClass" :styles="pageStyles"></Page>
        </b-col>
    </b-row>
</template> 


<!-- 与bootstrap样式的冲突，还需要再深入研究和处理 -->
<style>
.ivu-page-item:hover,
.ivu-page-item:focus {
    color: #2d8cf0;
}

.ivu-page-item-active,
.ivu-page-item-active:hover,
.ivu-page-item-active:focus {
    color: #fff;
}
</style>


<script>
import Vue from "vue";
import "iview/dist/styles/iview.css";

export default {
    name: "SkyPage",
    props: {
        //总页数
        totalPage: {
            type: Number,
            default: 0,
            required: true
        },
        //当前选中页数
        currentPage: {
            type: Number,
            default: 1
        },
        //每页记录数
        pageSize: {
            type: Number,
            default: 10
        },
        //是否显示页数电梯
        showElevator: {
            type: Boolean,
            default: true
        },
        //是否显示总页数
        showTotal: {
            type: Boolean,
            default: true
        },
        //自定义class
        pageClass: {
            type: Object
        },
        //自定义样式
        pageStyles: {
            type: Object
        }
    }
};
</script>
